"use client"
import * as fabric  from "fabric";
import { useEffect, useRef } from "react";
const FabricImage = () => { 
    const canvasRef = useRef<HTMLCanvasElement>(null);
    useEffect(() => { 
        const canvasElement = canvasRef.current!;
        const canvas = new fabric.Canvas(canvasElement);
        const rect = new fabric.Rect({ left: 0, top: 0, fill: 'red', width: 50, height: 50 })
        canvas.add(rect);
        // canvas.renderAll();
        return () => { 
            canvas.dispose();
        }

    }, []);
    return (

        <div className="w-full h-full">
            <canvas ref={canvasRef} width={600} height={400}></canvas>

        </div>
    );
}

export default FabricImage;